<script setup lang="ts">
import { onPageScroll } from "@dcloudio/uni-app";
import { ref } from "vue";
import { handleToPage } from "@/utils";

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
  <view class="wrap relative overflow-hidden">
    <page-navbar title="选择申报类型" :isScrolled="isScrolled"></page-navbar>
    <page-title title="选择申报类型"></page-title>
    <view class="grid gap-5 mt-11">
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/recommend_1.png" mode="widthFix" @click="handleToPage(`/pages/recommend/form-year`)" />
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/recommend_2.png" mode="widthFix" @click="handleToPage(`/pages/recommend/form-month`)" />
      <image class="w-full align-middle" src="https://static.minglvtang.com/images/recommend_3.png" mode="widthFix" @click="handleToPage(`/pages/recommend/form-self`)" />
    </view>
  </view>
</template>

<style>
.wrap {
  background-image: url('https://static.minglvtang.com/images/bg_recommend.png');
  background-position: right 0;
  background-size: 45%;
  background-repeat: no-repeat;
}
</style>
